<template>
  <el-dialog v-if="visible" :visible="visible" width="500px" title="编辑短剧" :append-to-body="true" :close-on-click-modal="false" @close="cancel">
    <el-form ref="form" v-loading="loading" :model="form" :rules="formRules" label-width="120px" label-position="left">
      <el-form-item label="名称" prop="name">
        <el-input v-model="form.name" :clearable="true" placeholder="请输入短剧名称" @clear="$refs.form.validateField(['name'])" />
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input v-model="form.sort" :clearable="true" placeholder="请输入排序" @clear="$refs.form.validateField(['sort'])" />
      </el-form-item>
      <el-form-item label="简介" prop="introduce">
        <el-input ref="introduce" v-model="form.introduce" type="textarea" :rows="8" resize="none" :clearable="true" placeholder="请输入短剧简介" />
        <div style="text-align: right">
          <el-button type="danger" size="mini" @click="form.introduce = ''; $refs.introduce.focus(); $refs.form.validateField(['introduce'])">清空</el-button>
        </div>
      </el-form-item>
      <el-form-item label="短剧封面" prop="cover">
        <upload :file-list="cover" @on-update="coverUpdate" />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="form.status">
          <el-radio :label="0">显示</el-radio>
          <el-radio :label="1">隐藏</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="cancel">取消</el-button>
      <el-button v-loading="loading" type="primary" @click="enter">确认</el-button>
    </template>
  </el-dialog>
</template>
<script>
import { shortPlayDetails, editShortPlay } from '@/api/short'

export default {
  name: 'Edit',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    shortId: {
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      loading: false,
      form: {
        id: '',
        category_id: '',
        name: '',
        cover: '',
        introduce: '',
        sort: '',
        status: 0
      },
      cover: [],
      formRules: {
        name: [
          {
            trigger: 'blur', validator(rule, value, callback) {
              if (typeof value !== 'string') {
                return callback(new Error('短剧名称不能为空'))
              }
              if (value.trim().length === 0) {
                return callback(new Error('短剧名称不能为空'))
              }
              return callback()
            }
          }
        ],
        cover: [
          {
            trigger: 'blur',
            validator(rule, value, callback) {
              if ((typeof value) !== 'string') {
                return callback(new Error('短剧封面不能为空'))
              }
              if (value.trim().length === 0) {
                return callback(new Error('短剧封面不能为空'))
              }
              return callback()
            }
          }
        ],
        introduce: [
          {
            trigger: 'blur',
            validator(rule, value, callback) {
              if (typeof value !== 'string') {
                return callback(new Error('简介不能为空'))
              }
              if (value.trim().length === 0) {
                return callback(new Error('简介不能为空'))
              }
              return callback()
            }
          }
        ],
        sort: [
          {
            trigger: 'blur',
            validator(rule, value, callback) {
              if (value.trim().length === 0) {
                return callback()
              }
              if (!/^\d+$/.test(value)) {
                return callback(new Error('请输入数值'))
              }
              return callback()
            }
          }
        ]
      }
    }
  },
  async mounted() {
    try {
      this.loading = true
      try {
        this.loading = true
        const shortPlayDetailsRes = await shortPlayDetails({ short_id: this.shortId })
        shortPlayDetailsRes.data.sort = shortPlayDetailsRes.data.sort.toString()
        this.form = shortPlayDetailsRes.data
        if (this.form.cover) {
          this.cover = [{ url: this.form.cover }]
        } else {
          this.cover = []
        }
        this.loading = false
      } catch (error) {
        this.$errorMessage()
        this.loading = false
      }
    } catch (error) {
      this.$errorMessage()
      this.loading = false
    }
  },
  methods: {
    async enter() {
      try {
        await this.$refs.form.validate()
        try {
          this.loading = true
          const form = Object.assign({}, this.form)
          form.sort = form.sort.trim().length === 0 ? 0 : parseInt(form.sort.trim())
          form.short_id = form.id
          await editShortPlay(form)
          this.loading = false
          this.$emit('enter')
        } catch (error) {
          this.$errorMessage()
          this.loading = false
        }
      } catch (error) {
        this.$errorMessage('表单填写有误')
      }
    },
    coverUpdate(fileList) {
      this.cover = fileList
      if (this.cover.length > 0) {
        this.form.cover = this.cover[0].url
      } else {
        this.form.cover = ''
      }
      this.$refs.form.validateField(['cover'])
    },
    cancel() {
      this.$emit('cancel')
    }
  }
}
</script>
